<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns">
    </FilterTable>
    <!-- 新增编辑窗口 -->
    <Drawer :visible.sync="visibleDrawer" :title="dialogTitle" destroyOnClose width="90%"
            :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <returnInfo v-model="initData" @close="closeHandler"/>
    </Drawer>

    <!-- 明细窗口 -->
    <Drawer :visible.sync="infoDrawer" :title="infoTitle" destroyOnClose width="90%"
            :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <detailInfo v-model="infoData" @close="closeInfoHandler"/>
    </Drawer>

    <BaseDialog
      :visible.sync="issearch"
      :title="'经销商查询'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <ownerSeacher  @close="dealercloseHandler" />
    </BaseDialog>

  </div>
</template>

<script>
  import {getRevierwReturnList,saveReturnInfo} from '@/api/partsmanage/saleReturnManage/index';
  import ownerSeacher from '@/pages/partsmanage/claim/approve/ownerSeacher';
  import { dictionary } from '@/utils/dictMixin';
  import returnInfo from './info';
  import detailInfo from '../returnQuery/detailInfo';
    export default {
      name: "returnTechReview",
      mixins: [dictionary],
      components: {
        ownerSeacher,
        returnInfo,
        detailInfo
      },
      data() {
        return{
          topFilterList: this.createTopFilterList(),
          columns: this.createTableColumns(),
          fetchApi: getRevierwReturnList,
          fetchParams: {
            searchType: 'JSSH', //技术审核
            xhrAbort: true
          },
          visibleDrawer: false,
          dealerCode:'',
          issearch:false,
          handleType: '',
          formData: {},
          title: '配件信息',
          dialogTitle: '',
          initData: {},
          infoDrawer: false,
          infoData: {},
          infoTitle: ''
        };
      },
      methods: {
        createTopFilterList() {
          return[
            {
              type: 'INPUT',
              label: '退货单号',
              fieldName: 'bkxtdh'
            },
            {
              type: 'INPUT',
              label: '采购单号',
              fieldName: 'bkysdj'
            },
            {
              type: 'INPUT',
              label: '经销商名称',
              fieldName: 'dealerCode',
              placeholder: '请选择',
              unitRender: () => {
                return (
                  <div>
                    <el-button icon="el-icon-search" onClick={() => this.seacherFun()}></el-button>
                  </div>
                );
              }
            },
            {
              type: 'SELECT',
              label: '退货类型',
              fieldName: 'bkthlx',
              placeholder: '请选择',
              itemList: this.createDictList('5004')
            },
            {
              type: 'SELECT',
              label: '退货单状态',
              fieldName: 'bkxtzt',
              placeholder: '请选择',
              itemList: this.createDictList('5005')
            },
            {
              type: 'RANGE_DATE',
              label: '提报日期',
              initialValue: '',
              fieldName: 'startTime|endTime',
              valueFormat: 'yyyy-MM-dd',
              placeholder: '请选择'
            }
          ]
        },
        createTableColumns () {
          return [
            {
              title: '操作',
              dataIndex: 'column-action',
              width: 100,
              fixed: 'left',
              render: props => {
                return (
                  <div>
                  <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row, 'edit')}>
                  审核
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button size="mini" type="text" onClick={() => this.detailInfo(props.row, 'info')}>
                  明细
                  </el-button>
                </div>
                );
              }
            },
            {
              title: '序号',
              dataIndex: 'index',
              width: 70,
              sorter: true,
              render: props => {
                return <span>{props.row.index + 1}</span>;
              }
            },
            {
              title: '退货单号',
              dataIndex: 'bkxtdh',
              sorter: true,
            },
            {
              title: '采购单号',
              dataIndex: 'bkysdj',
              sorter: true,
            },
            {
              title: '经销商代码',
              dataIndex: 'ownerCode',
              sorter: true,
              width: 160
            },
            {
              title: '经销商名称',
              dataIndex: 'dealerName',
              sorter: true,
              width: 160
            },
            {
              title: '退货类型',
              dataIndex: 'bkthlx',
              sorter: true,
              filter: true,
              filterType: 'checkbox',
              filterItems: this.createDictList('5004'),
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.bkthlx, '5004')}</span>;
              }
            },
            {
              title: '退货项目数',
              dataIndex: 'bkthxm',
              sorter: true,
            },
            {
              title: '退货数量',
              dataIndex: 'bkpzsl',
              sorter: true,
            },
            {
              title: '退货总金额',
              dataIndex: 'bkxtze',
              sorter: true,
            },
            {
              title: '退货状态',
              dataIndex: 'bkxtzt',
              sorter: true,
              filter: true,
              filterType: 'checkbox',
              filterItems: this.createDictList('5005'),
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.bkxtzt, '5005')}</span>;
              }
            },
            {
              title: '创建时间',
              dataIndex: 'createdAt',
              sorter: true,
              dateFormat: 'yyyy-MM-dd HH:mm:ss',
              filterType: 'date-range'
            },
          ]
        },
        detailHandle(row,type) {
          if (type === 'edit') {
            this.dialogTitle = '配件退货审核';
          }
          this.initData =  {
            type: type,
            data: row
          }; //行id
          this.visibleDrawer = true;
        },
        closeHandler(type) {
          this.visibleDrawer = false
          if (type === 'refresh') {
            // 重新加载
            this.fetchParams = Object.assign({}, this.fetchParams);
          }
        },
        changeHandle(val) {
          val.endTime && (val.endTime = val.endTime.split(' ')[0] + ' 23:59:59');
          this.fetchParams = Object.assign({},this.fetchParams, val, { xhrAbort: false });
        },
        collapseHandle() {
          this.$nextTick(() => {
            this.BaseTable.EXECUTE_RESET_HEIGHT();
          });
        },
        seacherFun(){
          this.issearch=true;
        },
        dealercloseHandler(val){
          if(val){
            this.topFilterList.find(x=>x.fieldName=='dealerCode').initialValue=val.dealerCode;
            // this.fetchParams=Object.assign({
            //   dealerCode: val.dealerCode
            // },this.fetchParams)
          }
          this.issearch=false;
        },
        detailInfo(row,type) {
          this.infoTitle = '配件退货信息';
          this.infoData =  {
            type: type,
            data: row
          }; //行id
          this.infoDrawer = true;
        },
        closeInfoHandler(type) {
          this.infoDrawer = false
          if (type === 'refresh') {
            // 重新加载
            this.fetchParams = Object.assign({}, this.fetchParams);
          }
        },
      }
    }
</script>

<style scoped>

</style>
